<template>
  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
    <NCard title="" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
      <template #header-extra>
      </template>
      <NDataTable
        :bordered="false"
        :single-line="false"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="640"
        :loading="loading"
        :pagination="pagination"
        :row-key="item => item.id"
        class="sm:h-full"
      />
    </NCard>
  </div>
</template>
<script setup lang="tsx">
import {ref} from 'vue';
import {useLoading} from '@sa/hooks';
import {useAppStore} from '@/store/modules/app';
import {$t} from '@/locales';
import {fetchGetUserList} from "@/service/api";

defineOptions({name: 'TenantUserList'})
const {loading} = useLoading();
const appStore = useAppStore();
const data = ref<Api.Entity.User[]>([]);
const searchParams = ref({});
const pagination = ref({
  pageSize: 15,
  pageNumber: 1,
  searchProperty: null,
  searchValue: null,
  orderProperty: null,
  orderDirection: null,
  filters: null
});
const columns = ref([
  {
    key: 'phoneNumber',
    title: '手机号码',
    align: 'center',
    minWidth: 100
  },
  {
    key: 'email',
    title: '邮箱',
    align: 'center',
    minWidth: 200
  },
  {
    key: 'nickName',
    title: $t('page.manage.user.nickName'),
    align: 'center',
    minWidth: 100
  },
  {
    key: 'operate',
    title: $t('common.operate'),
    align: 'center',
    width: 130,
    render: row => (
      <div class="flex-center gap-8px">
      </div>
    )
  }
]);

async function getData() {
  let res = await fetchGetUserList(searchParams.value);
  data.value = res.data?.content || [];
}

getData()
</script>

<style scoped>
:deep(.n-card__content) {
  padding: 0 !important;
}

.flex-vertical-stretch {
  height: 600px;
}

</style>
